<template>
  <footer class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-300 py-12 mt-20 border-t border-dotted border-gray-200">
    <!-- 个人信息区域 -->
    <div class="max-w-5xl mx-auto px-4 mb-8">
      <div class="flex flex-col md:flex-row items-start md:items-center">
        <!-- 卡通头像 -->
        <div class="w-20 h-20 rounded-full bg-gray-100 p-1 mb-4 md:mb-0 md:mr-6 transition-all duration-700 animate-rotate-slow hover:scale-110 shadow-md">
          <img src="@/assets/developer.png" alt="开发者头像" class="w-full h-full rounded-full object-cover">
        </div>
        
        <div class="flex-1">
          <!-- 个人介绍 -->
          <p class="text-left md:text-center max-w-2xl text-gray-500 dark:text-gray-400 leading-relaxed mb-6">
            一直对网站开发领域很感兴趣，在看到别人做的精美博客那时我就想有一个属于自己的博客， 我通过各种自学，
           以及各种折腾，才有了你现在看到的这个网站。
          </p>
          <div class="flex flex-col md:flex-row items-center md:justify-center space-y-4 md:space-y-0 md:space-x-8">
          
            <div class="flex items-center bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-3 rounded-lg transition-all duration-300 transform hover:-translate-y-1 border border-white border-opacity-20">
              <div class="w-10 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-lg flex flex-col items-center justify-center mr-3 animate-pulse">
                <span class=" font-semibold text-sm">Love</span>
                <span class=" text-xs animate-bounce">❤</span>
              </div>
              <span class=" font-semibold">基于开源项目二次创新</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
</script>

<style scoped>
/* 底部上边框点渐变效果 */
footer {
  border-image: linear-gradient(to right, transparent, rgba(107, 114, 128, 0.5), transparent) 1;
  border-top-width: 2px;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif !important;
}

  
/* 头像动态效果增强 - 自动旋转效果 */
.animate-rotate-slow {
  animation: rotate-slow 15s linear infinite;
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 爱心跳动动画 */
.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

</style>